﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>井冈山智慧社区官网</title>
		<meta http-equiv="Access-Control-Allow-Origin" content="">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link href="mui/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="styles/public.css" />
		<script src="mui/js/mui.js"  type="text/javascript"  charset="UTF-8"></script>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>	
		<script type="text/javascript" src="common.js" ></script>
	</head>
	
	<body>
		 <!-- 主页面容器  mui-scroll-wrapper-->
		<div class="mui-inner-wrap">
			<!-- 主页面标题 -->
			<!--<header class="mui-bar mui-bar-nav ">				
				<h1 class="mui-title">
					<img src="img/logo.png" class="kr-logo" width="25px" height="25px" />
					井冈山智慧社区
				</h1>
			</header>-->
			<!--描述：底部选项卡-->
			<nav class="mui-bar mui-bar-tab" id="footer">				
				<a class="mui-tab-item mui-active" href="list.html?categoryID=2" title="社区新闻">
					<span class="mui-icon fico1"></span>
					<span class="mui-tab-label">社区新闻</span>
				</a>
				<a class="mui-tab-item" href="list.html?categoryID=3" title="社区公告">
					<span class="mui-icon fico2"></span>
					<span class="mui-tab-label">社区公告</span>
				</a>
				<a class="mui-tab-item" href="list.html?categoryID=4" title="社区动态">
					<span class="mui-icon fico3"></span>
					<span class="mui-tab-label">社区动态</span>
				</a>
				<a class="mui-tab-item" href="list.html?categoryID=9" title="社区风貌">
					<span class="mui-icon fico4"></span>
					<span class="mui-tab-label">社区风貌</span>
				</a>
			</nav>
		
			<!-- 主界面具体展示内容 -->
			<div class="mui-content mui-scroll-wrapper">
				<div id="logo" class="hbj-logo">
										
				</div>
				<!--图片轮播-->
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group" id="sliderDiv" >						   
					</div>
					<!--通常轮播图中那个小圆点，页面轮播他也会移动-->
			        <div class="mui-slider-indicator mui-text-right" id="slider-indicator">			        	
			        </div>
				</div>
				<!--导航模块-->
				<div class="navtop" id="navDiv">
					<ul class="navlist">
						<li class="navli1">
							<a href="list.html?categoryID=2" title="社区新闻">
								<!--<img src="img/li01.png"/>
								<span> 工作动态</span>-->
							</a>							
						</li>
						<li class="navli2">
							<a href="list.html?categoryID=4" title="社区动态">
								<!--<img src="img/li02.png"/>-->
								<!--<span> 环保公文</span>-->
							</a>							
						</li>
						<li class="navli3">
							<a href="list.html?categoryID=3" title="社区公告">
								<!--<img src="img/li03.png"/>-->
								<!--<span> 环保公告</span>-->
							</a>							
						</li>						
					</ul>
					<div class="clear"></div>
				</div>					
			</div>
		</div>
		
			 
		<script type="text/javascript" charset="UTF-8">			
//			mui.init({
//				pullRefresh:{
//					container:"#slider",
//					down:{
//						callback:loadImgNews //pulldownRefresh 
//					}
////					up:{
////						contentrefresh: '正在加载...',
////						callback: pullupRefresh
////					}					
//				}
//			});
			
			//添加链接
			mui('.navlist li,#footer').on('tap','a',function(e){
				if(window.localStorage){
					localStorage.removeItem("title");//清除c的值
					localStorage.setItem("title",this.getAttribute('title'));
				}
				mui.openWindow({
					url: this.getAttribute('href'),
					id: 'list'
				});
			})
			
			
			loadImgNews();
			//加载图片新闻
			function loadImgNews(){				
				var url=Base_URL+"/SiteIndex/queryArticleAPP.json?isHomePic=1&topNum=6";				
				$.ajax({
               		type: "post",
               		url:url,               		
               		dataType:"jsonp",
               		scriptCharset: 'utf-8',
               		jsonp: "callback",
               		success: function(data){               			
                    	if(data!=null && data.length>0){                    		
							var htmlData =' ';	
							var htmlindicator=' ';
							 var rowcount = data.length;
							for (var i = 0; i < rowcount; i++) {
								var maxwidth=15; 
	    						if(data[i].title.length>maxwidth){
		    						data[i].title=data[i].title.substring(0,maxwidth);
		    						data[i].title+=' ...'; 
		    					}	    				
		    					
		    					var ImgurlNew='';			
		    					var dataSrc=data[i].imagesPath.split(',').shift();		    					
		    					if(dataSrc!='' && dataSrc.indexOf('http')==-1){ //判断图片路径
		    						ImgurlNew=Img_URL+dataSrc;
		    					}else{
		    						ImgurlNew=dataSrc;
		    					}
		    					
								 htmlData += '<div class="mui-slider-item"><a href="detail.html?id='+data[i].id+'">'+
								 '<img src="'+ImgurlNew+'"/>'+
								 '<p class="mui-slider-title">'+data[i].title+'</p></a></div>';
								 								 
								 htmlindicator+='<div class="mui-indicator"></div>';
							}
							
							document.getElementById("sliderDiv").innerHTML=htmlData;	
							document.getElementById("slider-indicator").innerHTML=htmlindicator;
							
							//获得slider插件对象
							var gallery = mui('.mui-slider');
							gallery.slider({
							  interval:0//自动轮播周期，若为0则不自动播放，默认为0；
							});
							
							var firs=$("#slider-indicator").find('div').eq(0);	
							firs.addClass("mui-active");							
						}              
               		},
	                error:function(){ 
						console.log("获取图片出现异常");
	                }
            	});
			}
		</script>
	</body>
</html>